<template>
  <vxe-layout-container vertical>
    <vxe-layout-header class="layout-header">
      <Query :queryConfig="QueryConfig" @QueryEvent="handleQuery"></Query>
    </vxe-layout-header>
    <vxe-layout-body class="layout-body">
      <vxe-grid ref="maingrid" v-bind="GridOptions">
        <template #customButtons>
          <vxe-button status='primary' content='新增' :size="componentSize" @click="handleAdd"
            v-if="btnPromission.add.buttonCaption" />
          <vxe-button status='danger' content='批量删除' :size="componentSize" @click="handleBatchDelete"
            v-if="btnPromission.delete.buttonCaption" />
        </template>
        <template #operation="{ row }">
          <vxe-button :size="componentSize" mode="text" status="primary" content="编辑" @click="handleEdit(row)"
            v-if="btnPromission.edit.buttonCaption" />
          <vxe-button :size="componentSize" mode="text" status="danger" content="删除" @click="handleDelete(row)"
            v-if="btnPromission.delete.buttonCaption" />
        </template>
        <template #lcjdStatus="{ row }">
          <vxe-tag v-if="row.lcjd == 'N'" status = 'error' content="否"></vxe-tag>
          <vxe-tag v-else status = 'success' content="是"></vxe-tag>
        </template>
      </vxe-grid>
    </vxe-layout-body>
    <vxe-layout-footer class="layout-footer">
      <vxe-pager :align="PagerConfig.align" :size="componentSize" :current-page.sync="PagerConfig.currentPage"
        :page-size.sync="PagerConfig.pageSize" :total="PagerConfig.total" @page-change="handlePageChange"></vxe-pager>
    </vxe-layout-footer>

    <!--数据编辑窗口-->
    <vxe-modal v-model="editModal" title="数据编辑" :width="650" :height="400">
      <vxe-form ref="editForm" v-bind="FormOptions" @submit="handleEditModalSubmit"
        @reset="handleEditModalReset"></vxe-form>
    </vxe-modal>
    
  </vxe-layout-container>

</template>
<style></style>
<script>
import MessageType from './index.js';
export default MessageType;
</script>
